<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="row border-bottom white-bg dashboard-header">
        欢迎使用SpinGxP仪器合规控制系统
    </div>
    <div class="wrapper wrapper-content">
        当前登录用户：<span th:text="${loginName}"></span>
        角色：<span th:text="${role}"></span>
        <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white p-6 rounded-xl shadow space-y-4">
                <h3 class="text-lg font-semibold">🧪 实验预约</h3>
                <p class="text-gray-600">快速预约核磁实验，选择设备和时间段。</p>
                <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700" onclick="startReservation()">开始预约</button>
            </div>
            <div class="bg-white p-6 rounded-xl shadow space-y-4">
                <h3 class="text-lg font-semibold">📄 报告查看</h3>
                <p class="text-gray-600">浏览历史实验记录，下载 PDF 报告。</p>
                <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700" onclick="viewReports()">查看报告</button>
            </div>
        </section>
        <section class="bg-white p-6 rounded-xl shadow">
            <h3 class="text-lg font-semibold mb-2">📋 仪器使用情况总览</h3>
            <ul class="text-gray-600 space-y-1 text-sm">
                <li>今日已预约：<span id="reservedCount">0</span>台，剩余空闲：<span id="availableCount">0</span>台</li>
                <li>下一个空闲时间：<span id="nextFreeTime">--:--</span></li>
                <li>设备状态：<span id="deviceStatus" class="text-green-500 font-semibold">正常</span></li>
            </ul>
        </section>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script type="text/javascript">

    </script>
</body>
</html>
